<!-- 首页卡片 -->
<template>
  <div class="home-index-content">
    <div class="home-item">
      <div class="home-item-header">
        <h3>
          <span> <img :src="imgArr[headIcon]" alt="" /> </span
          ><span>{{ title }}</span>
        </h3>
        <div style="flex: 1">
          <div class="data-box" v-if="isTimer">
            <BtnData @BtnDataClick="checkedTimer" />
          </div>
        </div>
        <div class="home-item-action">
          <slot name="action"></slot>
          <div class="search-box" v-if="isSearch">
            <Select v-model="model1" style="width: 200px">
              <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
            <Button
              type="primary"
              icon="ios-search"
              style="margin-left: 10px"
              @click="addTotal()"
              >添加</Button
            >
          </div>
        </div>
      </div>
      <div class="home-item-content">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import img_8 from "@/assets/icon/icon_08.png";
import img_9 from "@/assets/icon/icon_09.png";
import img_10 from "@/assets/icon/icon_10.png";

export default {
  name: "home-page",
  props: {
    title: {
      type: String,
      default: "",
    },
    // 显示搜索
    isSearch: {
      type: Boolean,
      default: false,
    },
    // 显示时间
    isTimer: {
      type: Boolean,
      default: false,
    },
    // 图标
    headIcon: {
      type: String,
      default: "img_8",
    },
  },
  data() {
    return {
      model1: "",
      cityList: [
        {
          value: 1,
          label: "公司",
        },
      ],
      imgArr: {
        img_8,
        img_9,
        img_10,
      },
    };
  },
  methods: {
    checkedTimer(item) {
      this.$emit("checkedTimer", item);
    },
    // 添加统计搜索条件
    addTotal() {
      this.$emit("checkedSearch", this.model1);
    },
  },
};
</script>

<style lang="less" scoped>
.home-item {
  border-radius: 6px;
  background: #fff;
  padding: 20px;
  .home-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 20px;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
      }
      span:nth-child(1) {
        margin-right: 20px;
        border-radius: 50%;
        flex: none;
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.home-item-action {
  display: flex;
  align-items: center;
}
.data-box{
  width: 140px;
}
</style>
